<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>装饰作用</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<style>
    .cover{
        margin-top: 10px;
        background-color: deeppink;
    }
    .cover img{
        height: 100%;
        width: 100%;
    }
    .foot{
        width: 100%;
        height: 300px;
        float: left;
    }
    .foot-left{
        float: left;
        width: 50%;
        height: 300px;
    }
    .foot-right{
        width: 50%;
        float: right;
        height: 300px;

    }
    .foot img{
        margin-top: 10px;
        margin-left: 5px;
        width: 350px;
        height: 150px;
    }
</style>
<body>
<script src="layui/layui.js"></script>
<div class="layui-main" style="width: 98%;">
    <!-- 轮播图-->
    <div class="layui-row cover layui-carousel" id="test1">
        <div carousel-item>
            <div>
                <img src="/img/cover1.png">
            </div>
            <div>
                <img src="/img/cover2.png">
            </div>
            <div>
                <img src="/img/cover3.PNG">
            </div>
        </div>
    </div>
    <!--底部装饰-->
    <div class="foot">
        <div class="foot-left">
            <img src="img/foot1.png">
        </div>
        <div class="foot-right">
            <img src="img/foot2.png">
        </div>
    </div>

</div>
</body>

</html>
<script>
    //引入轮播图组件
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            height:'380px'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
